<template>
  <a-breadcrumb style="margin-left: 20px;line-height: 30px;font-size: 12px;">
    <template v-for="(level,index) in levelList">
      <a-breadcrumb-item v-if="level.path!=='' && level.meta.notBre!==true" :key="index">
        <a-icon :type="level.meta.icon"/>
        <span>{{level.meta.name}}</span>
      </a-breadcrumb-item>
    </template>
  </a-breadcrumb>
</template>

<script>
  import {Breadcrumb, Icon} from 'ant-design-vue'

  export default {
    name: "NipBreadcrumb",
    components: {
      AIcon: Icon,
      ABreadcrumb: Breadcrumb,
      ABreadcrumbItem: Breadcrumb.Item,
    },
    data() {
      return {
        levelList: null
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb()
      }
    },
    created() {
      this.getBreadcrumb()
    },
    methods: {
      getBreadcrumb() {
        this.levelList = this.$route.matched.filter(item => item.meta.name);
      }
    }
  }
</script>

<style scoped>

</style>
